<template>
    <div>
       <el-table
       :data="categoryList"
       stripe
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
       row-key="id"
       style="width: 100%">
       <el-table-column
           prop="id"
           label="分类编号"
           width="80"
           align="center">
       </el-table-column>
       <el-table-column
           prop="pid"
           label="上级编号"
           width="80"
           align="center">
       </el-table-column>
       <el-table-column
           prop="catename"
           label="类型名称"">
       </el-table-column>
   
   
       
       <el-table-column
           prop="img"
           label="类型封面">
           <template v-slot="prop">
            
            <img v-if="prop.row.img!=''" :src="'http://localhost:3000/'+ prop.row.img" style="width: 50px;height: 50px;" >
           </template>
          
       </el-table-column>







       <el-table-column
           prop="status"
           label="是否启用">
       </el-table-column>
       <el-table-column
           label="操作">
           <template>
            
               <el-button type="primary" icon="el-icon-edit" circle ></el-button>
               <el-button type="danger" icon="el-icon-delete" circle ></el-button>
           </template>
       </el-table-column>
   </el-table>
 
    </div>
   </template>
   
   <script>
       import {mapState,mapActions} from 'vuex'
   export default {
    data(){
    return{
   
    }
    },
    created(){
        this.getCategoryListActions(this.categoryData)
    },
    computed:{
       ...mapState({
        categoryList:state=>state.category.categoryList
       })
    },
    methods:{
        ...mapActions("category",['getCategoryListActions',])
    },
    components:{
   
    }
   }
   
   </script>
   <style scoped>
   </style>